<!--
 * @页面名称:统计分析
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card statisticalAnalysis">
    <splitpanes :dbl-click-splitter="false" style="display: flex">
      <pane size="15">
        <ztree :setting="treeSetting.setting" :nodes="treeSetting.treeData" @onClick="onTreeClick"> </ztree>
      </pane>
      <pane size="85">
        <div class="right-select">
          <span class="right-space">请选择图表样式:</span>
          <el-select v-model="chartType" style="width: 200px" @change="handleChange">
            <el-option label="柱状图" value="bar">柱状图</el-option>
            <el-option label="折线图" value="line">折线图</el-option>
            <el-option label="饼图" value="pie">饼图</el-option>
            <el-option label="雷达图" value="radar">雷达图</el-option>
            <el-option label="漏斗图" value="funnel">漏斗图</el-option>
          </el-select>
        </div>
        <!-- 统计图表 -->
        <div style="width: 100%; height: calc(50% - 40px)" ref="chart"></div>
        <!-- 统计表格 -->
        <div style="height: 50%">
          <Stable :columns="tableSetting.columns" :data="tableSetting.data"></Stable>
        </div>
      </pane>
    </splitpanes>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, watch } from "vue";
import Ztree from "@/components/Ztree/Ztree.vue";
import { sumBy } from "lodash-es";
import * as echarts from "echarts";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
const chartType = ref("bar"); // 图标默认样式
const chartList: any = ref([]); // 图表统计数据
const radarData = ref([]); // 雷达图数据
// tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: true,
        idKey: "Fonds_ID",
        pIdKey: "Fonds_Father"
      },
      key: {
        name: "Fonds_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [] as any[],
  ztreeObj: {} as any
});
// 表格配置
const tableSetting = reactive({
  columns: [
    // 表格表头
    {
      title: "门类名称",
      field: "OCName",
      sortable: true,
      fixed: "left",
      width: 200
    },
    {
      title: "状态",
      field: "Status"
      // sortable: true,
    },
    {
      title: "案卷数量",
      field: "FilesNumber"
      // sortable: true,
    },
    {
      title: "文件数量",
      field: "FileNumber"
      // sortable: true,
    },
    {
      title: "附件数量",
      field: "AccessoryNumber",
      sortable: true
    },
    {
      title: "页数",
      field: "PagesNumber",
      sortable: true
    },
    {
      title: "全文数量",
      field: "FullTextNumber",
      sortable: true
    },
    {
      title: "全文容量",
      field: "FullTextCapacitys",
      sortable: true
    }
  ],
  data: [] as any
});
const chart = ref(); //图表实例

// 获取左侧树数据
const getLeftTreeData = () => {
  proxy.$vueAxios.get("MasterPermission/GetUserPermissionFonds").then((res: any) => {
    treeSetting.treeData = res.List;
  });
};
// 点击左侧树事件
const onTreeClick = (treeNode: any) => {
  if (Object.keys(treeNode).length > 0) {
    chartType.value = "bar";
    proxy.$vueAxios
      .get("DynamicStatistics/GetStatistics", { fondsid: treeNode.Fonds_ID }, { noLoading: true })
      .then((res: any) => {
        tableSetting.data = res.List;
        const echartsData: any[] = [];
        const num1 = sumBy(tableSetting.data, "FilesNumber");
        const num2 = sumBy(tableSetting.data, "FileNumber");
        const num3 = sumBy(tableSetting.data, "AccessoryNumber");
        const num4 = sumBy(tableSetting.data, "FullTextNumber");
        chartList.value = echartsData.concat(
          [{ name: "案卷", value: num1 }],
          [{ name: "文件", value: num2 }],
          [{ name: "附件", value: num3 }],
          [{ name: "全文", value: num4 }]
        );
        drawChart(chartType.value);
        radarData.value = chartList.value.map((item: any) => {
          return item.value;
        });
      });
  }
};
const handleChange = (value: string) => {
  nextTick(() => {
    drawChart(value);
  });
};
const drawChart = (value: string) => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(chart.value);
  // 指定图表的配置项和数据
  if (value === "bar" || value === "line") {
    const option = {
      title: {
        text: "",
        x: "center"
      },
      tooltip: {},
      legend: {
        left: "left"
      },
      xAxis: {
        data: [
          "案卷",
          "文件",
          "附件",
          // '页数',
          "全文"
        ]
      },
      yAxis: {},
      series: [
        {
          name: "数量",
          type: value, // 图表类型
          data: chartList.value // 图表数据
        }
      ]
    };
    myChart.clear(); // 图表从新加载时先清空画布
    myChart.setOption(option); // 使用刚指定的配置项和数据显示图表。
  } else if (value === "pie") {
    const option = {
      title: {
        text: "",
        x: "center"
      },
      tooltip: {},
      legend: {
        orient: "vertical",
        left: "left",
        data: [
          "案卷",
          "文件",
          "附件",
          //  '页数',
          "全文"
        ]
      },
      series: [
        {
          name: "数量",
          type: value, // 图表类型
          data: chartList.value // 图表数据
        }
      ]
    };
    myChart.clear(); // 图表从新加载时先清空画布
    myChart.setOption(option); // 使用刚指定的配置项和数据显示图表。
  } else if (value === "radar") {
    const option = {
      title: {
        text: "",
        x: "center"
      },
      tooltip: {},
      legend: {},
      radar: {
        name: {
          textStyle: {
            color: "#fff",
            backgroundColor: "#999",
            borderRadius: 3,
            padding: [3, 5]
          }
        },
        indicator: [
          { name: "案卷" },
          { name: "文件" },
          { name: "附件" },
          // { name: '页数' },
          { name: "全文" }
        ]
      },
      series: [
        {
          name: "数量",
          type: value, // 图表类型
          data: [
            {
              value: radarData.value
            }
          ]
        }
      ]
    };
    myChart.clear(); // 图表从新加载时先清空画布
    myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
  } else if (value === "funnel") {
    const option = {
      title: {
        text: "",
        x: "center"
      },
      tooltip: {},
      legend: {
        orient: "vertical",
        left: "left",
        data: [
          "案卷",
          "文件",
          "附件",
          // '页数',
          "全文"
        ]
      },
      calculable: true,
      series: [
        {
          name: "数量",
          type: value, // 图表类型
          left: "10%",
          label: {
            show: true,
            position: "inside"
          },
          data: chartList.value // 图表数据
        }
      ]
    };
    myChart.clear(); // 图表从新加载时先清空画布
    myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
  }
  // 根据窗口的大小变动图表
  window.onresize = () => {
    myChart.resize();
  };
};
onMounted(() => {
  getLeftTreeData();
});
</script>

<style scoped lang="scss">
.statisticalAnalysis {
  height: 100%;
  .right-select {
    height: 40px;
    display: flex;
    align-items: center;
    .right-space {
      margin-right: 10px;
    }
  }
}
</style>
